<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>权限设置</span>
      </div>
      <el-table :data="permissions" style="width: 100%">
        <el-table-column prop="role" label="角色"></el-table-column>
        <el-table-column prop="accessModules" label="可访问模块">
          <template slot-scope="scope">
            <ul class="module-list">
              <li v-for="(module, index) in scope.row.accessModules" :key="index">{{ module }}</li>
            </ul>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="120">
          <template slot-scope="scope">
            <el-button size="small" type="primary" @click="handleEditPermissions(scope.$index, scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog title="编辑权限" :visible.sync="dialogVisible" width="40%" center>
      <el-form :model="permissionForm" label-width="100px">
        <el-form-item label="角色">
          <el-input v-model="permissionForm.role" disabled></el-input>
        </el-form-item>
        <el-form-item label="可访问模块">
          <el-checkbox-group v-model="permissionForm.accessModules">
            <el-checkbox v-for="module in allModules" :label="module" :key="module">{{ module }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmEditPermissions">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      permissions: [
        { id: 1, role: 'admin', accessModules: ['基础信息管理', '任务管理', '资源管理', '数据统计与分析', '系统设置'] },
        { id: 2, role: 'user', accessModules: ['基础信息管理', '任务管理'] }
      ],
      dialogVisible: false,
      permissionForm: {
        id: null,
        role: '',
        accessModules: []
      },
      allModules: ['基础信息管理', '任务管理', '资源管理', '数据统计与分析', '系统设置']
    };
  },
  methods: {
    handleEditPermissions(index, row) {
      this.permissionForm.id = row.id;
      this.permissionForm.role = row.role;
      this.permissionForm.accessModules = [...row.accessModules];
      this.dialogVisible = true;
    },
    confirmEditPermissions() {
      const permissionIndex = this.permissions.findIndex(permission => permission.id === this.permissionForm.id);
      if (permissionIndex !== -1) {
        this.permissions[permissionIndex].accessModules = this.permissionForm.accessModules;
      }
      this.dialogVisible = false;
      console.log('权限已更新:', this.permissionForm);
    }
  }
};
</script>

<style scoped>
.app-container {
  padding: 20px;
  background-color: #f0f2f5;
}

.box-card {
  margin-bottom: 20px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.module-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.module-list li {
  margin-bottom: 5px;
}

.el-button--small {
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.el-dialog {
  border-radius: 8px;
}

.el-dialog__header {
  background-color: #eef1f6;
  padding: 15px;
  border-bottom: 1px solid #dcdfe6;
}

.el-dialog__body {
  padding: 20px;
}

.el-dialog__footer {
  text-align: right;
  padding: 10px 20px 20px;
  border-top: 1px solid #dcdfe6;
}

.el-checkbox {
  margin-right: 15px;
  margin-bottom: 10px;
}

@media (max-width: 768px) {
  .el-dialog {
    width: 90%;
  }
}
</style>